<template>
  <div class="app-container">
    <el-card>
      <div class="expert-title-outBox">
        <div class="expert-title">专家抽取监控/详情</div>
        <div class="back-btn" @click="handBack">
          <img src="@/assets/images/tripartite/back_button.png" alt="" />返回
        </div>
      </div>
      <!-- 基本信息 -->
      <div>
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>基本信息</span>
        </div>
        <el-descriptions border :column="2">
          <el-descriptions-item label="评审任务名称"
            >{{infoData.taskName}}</el-descriptions-item
          >
          <el-descriptions-item label="评审类别"
            >{{infoData.reviewType==0?'方案评审':'年度计划评审'}}</el-descriptions-item
          >
          <!-- <el-descriptions-item label="评审时间">{{infoData.reviewTimeStart +' - ' + infoData.reviewTimeEnd}}</el-descriptions-item> -->
          <el-descriptions-item label="评审地点">{{infoData.reviewAddress}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 抽取规则 -->
      <div>
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>抽取规则</span>
        </div>
        <el-table :data="extractRules" border>
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="65"
          />
          <el-table-column
              label="抽取类型"
              prop="extractType"
              align="center"
            >
            <template slot-scope="scope">
                {{scope.row.extractType==1?'条件抽取':scope.row.extractType==2?'随机抽取':'指定专家抽取'}}
            </template>
          </el-table-column>
          <el-table-column
            label="人数"
            align="center"
            prop="peopleNumber"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="抽取规则描述"
            align="center"
            prop="extractRuleDesc"
          />
        </el-table>
      </div>
      <!-- 抽取信息 -->
      <div>
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>抽取信息</span>
        </div>
        <el-descriptions border :column="2">
          <el-descriptions-item label="抽取时间"
            >{{infoData.extractTime}}</el-descriptions-item
          >
          <el-descriptions-item label="抽取数量"
            >{{infoData.expertNum}}</el-descriptions-item
          >
          <el-descriptions-item label="抽取类型">{{infoData.extractType==1?'统一抽取':infoData.extractType==2?'更换专家':''}}</el-descriptions-item>
          <el-descriptions-item label="抽取结果">{{infoData.extractResult==1?'发送专家接受':infoData.extractResult==2?'重新抽取':infoData.extractResult}}</el-descriptions-item>
          <el-descriptions-item label="抽取单位">{{infoData.extractUnit}}</el-descriptions-item>
          <el-descriptions-item label="操作人">{{infoData.extractPeople}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 专家信息 -->
      <div>
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>专家信息</span>
        </div>
        <el-table :data="extractExpertInfoVos" border>
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column
            label="姓名"
            align="center"
            prop="expertName"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="性别" align="center" prop="sex">
            <template slot-scope="scope">
              <span>{{ scope.row.sex==0?'男':'女' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="职称" align="center" prop="technicalName">
            <!-- <template slot-scope="scope">
              <span>{{ scope.row.technicalName==1?'电子信息高级工程师':scope.row.technicalName==2?'高校教授':'' }}</span>
            </template> -->
          </el-table-column>
          <el-table-column label="年龄" align="center" prop="age" />
          <el-table-column label="工作单位" align="center" prop="workUnit"/>
          <el-table-column label="擅长领域" align="center" prop="areasOfExpertise">
            <!-- <template slot-scope="scope">
              <span>{{ scope.row.areasOfExpertise==0?'土木工程'
                :scope.row.areasOfExpertise==1?'财务'
                :scope.row.areasOfExpertise==2?'环境保护'
                :scope.row.areasOfExpertise==3?'计算机技术'
                :scope.row.areasOfExpertise==4?'机械工程'
                :'' }}</span>
            </template> -->
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleView(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import {getExtractUnitDetails} from "@/api/manage/manage"
export default {
  data() {
    return {
      //抽取规则
      extractRules:[],
      //专家信息
      extractExpertInfoVos:[],
      //详情信息
      infoData:{}
    };
  },
  created(){
    //获取抽取监控详细信息
    const data = {
      extractTime:this.$route.query.extractTime
    }
    const reviewTaskId = this.$route.query.reviewTaskId;
    getExtractUnitDetails(reviewTaskId,data).then((response) => {
      if(response.code==200){
          this.extractRules=response.data.extractRules
          this.extractExpertInfoVos=response.data.extractExpertInfoVos
          this.infoData=response.data
        }
    });
  },
  methods: {
    /** 返回按钮操作 */
    handBack() {
      this.$router.push({
        path: "/business_manage/extractdata",
      });
    },
    /** 查看专家信息按钮 */
    handleView(row) {
      this.$router.push({
        path: "/tripartite/expert/expertview",
        query: { expertId: row.expertId },
      });
    },
    
  },
};
</script>
<style scoped lang="scss">
.expert-title-outBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .expert-title {
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #000;
  }
  .back-btn {
    font-size: 14px;
    color: #333;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      position: relative;
      top: 2px;
    }
  }
}
.submit-outBox {
  width: 100%;
  text-align: center;
  .btn {
    width: 200px;
  }
}
.model-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebecef;
  border-top: 1px solid #ebecef;
  margin-bottom: 24px;
  margin-top: 24px;
  img {
    width: 16px;
    height: 16px;
    position: relative;
    right: 5px;
    top: 2px;
  }
}
</style>
<style>
/*表单label不加粗  */
label {
  font-weight: normal !important;
}
/* el-descriptions-item 文字居中 */
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
</style>
